.switch {
  all: unset;
  width: 42px;
  height: 25px;
  background-color: transparent;
  border-radius: 9999px;
  border: 1px solid var(--input-border);
  position: relative;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
  margin-inline-end: 0.5rem;
}

.switch[data-state='checked'] {
  background-color: var(--button-default-hover-bg);
}

.switch:hover .thumb {
  background-color: #909bad;
}

.switch:focus {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}

.thumb {
  display: block;
  width: 21px;
  height: 21px;
  background-color: var(--accent-color-d1);
  border-radius: 9999px;
  /*box-shadow: 0 2px 2px hsl(0deg 0% 0% / 14%);*/
  transition: transform 100ms;
  transform: translateX(2px);
  will-change: transform;
}

.thumb[data-state='checked'] {
  transform: translateX(19px);
}
